import { Component, ReactNode } from "react";
import { TodoListProp } from "../Impl/TodoImp";

class TodoList extends Component<TodoListProp>{
    constructor(props:TodoListProp){
        super(props);
        // console.log('props====>',props)
    }
    render(): ReactNode {
        return <>
        <ul>
            {this.props.todoarray.map(t=>{
                return <li key={t.id}>{t.id}.{t.text} 
                    <button onClick={()=>{
                            this.props.setTodoArray(this.props.todoarray.map(item=>{
                                if(t.id==item.id) item.done=!item.done;
                                return item;
                            }))
                        }}>
                        {t.done?'已完成':"未完成"}
                    </button>
                 </li>
            })}
        </ul>
        </>
    }
}
export default TodoList